<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <div class="left"><img src="登录UI.png" alt=""></div>
        <div class="right">
            <h4>行政审批管理平台</h4>
            <form action="">
                <input class="acc" type="text" placeholder="账号">
                <input class="acc" type="password" placeholder="密码">
                <input class="but" type="submit" value="登录">
            </form>
            <div class="fn">
                <a href="注册.html" class="aaa">注册账号</a>
                <a href="javascript:">找回密码</a>
            </div>
        </div>
    </div>
</body>



<script>
    var input = document.getElementsByTagName('input');
    var but = document.querySelector('.but');

    but.onclick = function () {
        //判断是否输入
        for (var i = 0; i < input.length; i++) {
            if (input[i].value == "") {
                alert('请输入信息');
                return 0;
            }
        }

        //判断是否为管理员账号
        if(input[0].value == 1 && input[1].value ==1) {
            alert('登录成功');
            location.href = "../管理端页面/管理端.html";
            window.event.returnValue=false;
            return 1;
        }

        //判断账号密码是否匹配
        for (var i = 0; i < JSON.parse(localStorage.getItem('zhang')).length; i++) {
            if (input[0].value == JSON.parse(localStorage.getItem('zhang'))[i] && input[1].value == JSON.parse(localStorage.getItem('mi'))[i]) {
                alert('登录成功');
                localStorage.setItem('this', JSON.stringify(i));
                location.href = "../用户端页面/用户端.html";
                window.event.returnValue=false;
                return 1;
            }
        }
        alert('账号或密码错误');
    }
</script>

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    

    /* 设置大盒子 */
    .box {
        display: flex;
        overflow: hidden;
        width: 1300px;
        height: 800px;
        margin: 10% auto;
        border-radius: 1.5rem;
        box-shadow: 0 0 1rem 0.2rem rgb(0 0 0 / 10%);
    }

    /* 设置盒子左边 */
    .box .left {
        position: relative;
        width: 50%;
        height: 100%;
    }

    img {
        width: 100%;
        height: 100%;
    }


    /* 设置盒子右边 */
    .box .right {
        width: 65%;
    }

    .box .right h4 {
        font-size: 50px;
        margin-top: 30px;
        margin-left: 0px;
    }

    .box .right form .acc {
        outline: none;
        width: 80%;
        height: 5rem;
        font-size: 30px;
        margin-top: 5rem;
        padding: 1rem 0 0 1.6rem;
        border: none;
        border-bottom: 1px solid;
        background-color: rgba(0, 0, 0, 0);
    }

    /* 设置超链接 */
    .right .fn {
        display: flex;
        justify-content: space-between;
        margin-top: 1rem;
        width: 70%;
    }

    .right .fn a {
        font-size: 1.3rem;
        /* margin-top: 5rem; */
        padding: 1rem 2rem;
        color: #666;
    }

    .right .fn a:hover {
        color: blue;
    }

    /* 设置按钮 */
    .right .but {
        width: 40%;
        height: 80px;
        font-size: 35px;
        border: none;
        margin: 50px 110px;
    }
</style>

</html>